<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="./js/vue.js"></script>
<script>

    Vue.config.productionTip = false;

    /*new Vue创建出来的vm实例 我们称为根组件
        1. 模板必须有一个根标签进行包裹
        2. 只有在根组件中才能使用el 在子组件中要指定模板需要使用template
        3. 使用data时只有在根组件中才能使用对象  在子组件中data必须得是一个函数;
                                                函数返回的对象才是真正的响应式数据
    */

    new Vue({
        el:"#app",
        template:`<div>
                <v-zdy></v-zdy>
                <v-zdy></v-zdy>
                <span>{{msg}}</span>
            </div> `,
        data:{
            msg:"根组件的msg"
        },
        components:{
            "v-zdy":{
                template:`<div>
                    <img src="./img/zdy.jpg" width="100" height="200">
                    <p class="red">{{msg}}</p>
                </div>`,
                data(){
                    return  {
                        msg:"子组件的msg"
                    }
                }
            }
        }
    })
</script>
</html>